<template>
  <PageContainer>
    <section class="content-block">
      <AsyncState
        :loading="applicationsLoading"
        :error="applicationsError"
        :isEmpty="!applicationCards.length"
        emptyMessage="暂未收录应用案例，敬请期待。"
        :retry="refresh"
      >
        <div class="applications-grid">
          <div
            v-for="application in applicationCards"
            :key="application.id"
            class="application-card"
          >
            <div class="card-content">
              <div class="card-text">
                <h3 class="card-title">{{ application.title }}</h3>
                <p class="card-description">{{ application.summary }}</p>
                <div class="card-meta">
                  <div
                    v-for="item in application.meta"
                    :key="item.label"
                    class="meta-item"
                  >
                    <span class="meta-label">{{ item.label }}：</span>
                    <span class="meta-value">{{ item.value }}</span>
                  </div>
                </div>
                <div v-if="application.tags?.length" class="tag-group">
                  <span v-for="tag in application.tags" :key="tag" class="tag">{{ tag }}</span>
                </div>
                <div v-if="application.technologies?.length" class="tech-group">
                  <span class="tech-label">技术栈：</span>
                  <span v-for="tech in application.technologies" :key="tech" class="tech-chip">
                    {{ tech }}
                  </span>
                </div>
                <p v-if="application.detail" class="detail-text">{{ application.detail }}</p>
              </div>
              <div class="card-image">
                <img
                  v-if="application.image"
                  :src="application.image"
                  :alt="application.title"
                  @error="handleImageError"
                />
                <div v-else class="image-placeholder">
                  <span>暂无图片</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </AsyncState>
    </section>
  </PageContainer>
</template>

<script setup>
import { computed, onMounted } from 'vue'
import PageContainer from '../components/PageContainer.vue'
import AsyncState from '../components/AsyncState.vue'
import { getApplications } from '../api/client'
import { useAsyncData } from '../composables/useAsyncData'
import { truncateText } from '../utils/formatters'

const {
  data: applications,
  loading: applicationsLoading,
  error: applicationsError,
  execute: fetchApplications,
} = useAsyncData(getApplications, {
  initialValue: [],
  transform: (data) => data?.items ?? [],
})

onMounted(() => {
  fetchApplications().catch(() => {})
})

const applicationCards = computed(() =>
  applications.value.map((item) => {
    // 如果 metrics 已经是格式化好的数组，直接使用；否则转换
    let meta = []
    if (item.meta && Array.isArray(item.meta)) {
      // 后台已经提供了格式化好的 meta
      meta = item.meta
    } else {
      // 兼容旧格式：从 metrics 转换
      const metrics = Object.entries(item.metrics || {}).map(([key, value]) => ({
        label: item.metricLabels?.[key] || key,
        value,
      }))
      meta = [{ label: '行业', value: item.industry || '未注明' }, ...metrics]
    }
    
    return {
      ...item,
      summary: truncateText(item.summary, 120),
      detail: item.detail,
      meta,
      tags: item.tags ?? [],
    }
  }),
)

const refresh = () => fetchApplications().catch(() => {})

// 图片加载错误处理
function handleImageError(event) {
  // 图片加载失败时隐藏图片，显示占位符
  const img = event.target
  const placeholder = img.parentElement.querySelector('.image-placeholder')
  if (placeholder) {
    img.style.display = 'none'
    placeholder.style.display = 'flex'
  }
}
</script>

<style scoped>
.content-block {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.applications-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.application-card {
  background: #fff;
  border: 1px solid #ebeef5;
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.application-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(64, 158, 255, 0.15);
  border-color: rgba(64, 158, 255, 0.3);
}

.card-content {
  display: flex;
  height: 100%;
  min-height: 300px;
}

.card-text {
  flex: 1;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.card-title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #1f2d3d;
}

.card-description {
  margin: 0;
  font-size: 14px;
  color: #606266;
  line-height: 1.6;
  flex: 1;
}

.card-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.meta-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 13px;
}

.meta-label {
  color: #909399;
  font-weight: 500;
}

.meta-value {
  color: #1f2d3d;
  font-weight: 600;
}

.tag-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag {
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(64, 158, 255, 0.12);
  color: #2f6fd3;
  font-size: 12px;
  font-weight: 500;
}

.tech-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.tech-label {
  font-size: 13px;
  color: #909399;
  font-weight: 500;
}

.tech-chip {
  background: #f0f9eb;
  color: #67c23a;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
}

.detail-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: #606266;
}

.card-image {
  width: 300px;
  flex-shrink: 0;
  overflow: hidden;
  background: #f5f7fa;
}

.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.image-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(64, 158, 255, 0.1), rgba(103, 194, 58, 0.1));
  color: #909399;
  font-size: 14px;
}

@media (max-width: 1024px) {
  .applications-grid {
    grid-template-columns: 1fr;
  }

  .card-content {
    flex-direction: column;
  }

  .card-image {
    width: 100%;
    height: 250px;
  }
}

@media (max-width: 640px) {
  .card-text {
    padding: 20px;
  }

  .card-image {
    height: 200px;
  }
}
</style>

